Ext.onReady(function() {

	Ext.QuickTips.init();

	Ext.form.Field.prototype.msgTarget = 'side';

	var fields = ['company', 'price', 'change', 'pctChange', {
				name		: 'lastChange',
				type		: 'date', // required!
				dateFormat	: 'timestamp'
			}];

	var store = new Ext.ux.data.PagingJsonStore({
				root		: 'data',
				fields		: fields,
				url			: 'data.json',
				autoLoad	: {
					params	: {
						start	: 0,
						limit	: 10
					}
				}
			})

	store.on('beforeload', function(store) {
				store.baseParams = {
					q	: 'enter your keyword'
				}
			});

	var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
				header		: '公司',
				sortable	: true,
				dataIndex	: 'company'
			}, {
				header		: '每股售价',
				sortable	: true,
				renderer	: 'usMoney',
				dataIndex	: 'price'
			}, {
				header		: '波动',
				sortable	: true,
				dataIndex	: 'change'
			}, {
				header		: '波动率',
				sortable	: true,
				dataIndex	: 'pctChange'
			}, {
				header		: '最新更新',
				sortable	: true,
				renderer	: Ext.util.Format.dateRenderer('Y-m-d h:i:s.u'),
				dataIndex	: 'lastChange'
			}]);

	var grid = new Ext.grid.GridPanel({
				title		: 'Book List',
				width		: 700,
				autoHeight	: true,
				viewConfig	: {
					forceFit	: true
				},
				cm			: cm,
				store		: store,
				bbar		: new Ext.PagingToolbar({
							store			: store,
							pageSize		: 10,
							prependButtons	: true, // 按钮的位置.
							displayInfo		: true,
							items			: [{
										xtype	: 'button',
										text	: 'extra button'
									}]
						})
			});

	grid.on({
				'click'		: {
					fn		: function() {
						alert('click event.');
					},
					scope	: this,
					delay	: 100
				},
				'mouseover'	: {
					fn		: Ext.emptyFn,
					scope	: this
				}
			});

	new Ext.Viewport({
				layout	: 'fit',
				items	: grid
			});

		/*var myData = [['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
	['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'], ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
	['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'], ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'], ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
	['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'], ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
	['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'], ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
	['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'], ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
	['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'], ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
	['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'], ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
	['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'], ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
	['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'], ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'], ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
	['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'], ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
	['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'], ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
	['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'], ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']];

	// example of custom renderer function
	function change(val) {
	if (val > 0) {
	return '<span style='color:green;'>' + val + '</span>';
	} else if (val < 0) {
	return '<span style='color:red;'>' + val + '</span>';
	}
	return val;
	}

	// example of custom renderer function
	function pctChange(val) {
	if (val > 0) {
	return '<span style='color:green;'>' + val + '%</span>';
	} else if (val < 0) {
	return '<span style='color:red;'>' + val + '%</span>';
	}
	return val;
	}

	// create the data store
	var store = new Ext.ux.PagingStore({
	baseParams	: {
	start	: 0,
	limit	: 10
	},
	data		: myData,
	reader		: new Ext.data.ArrayReader({}, [{
	name	: 'company'
	}, {
	name	: 'price',
	type	: 'float'
	}, {
	name	: 'change',
	type	: 'float'
	}, {
	name	: 'pctChange',
	type	: 'float'
	}, {
	name		: 'lastChange',
	type		: 'date',
	dateFormat	: 'n/j h:ia'
	}])
	});
	store.reload();

	var linkButton = new Ext.Button({
	text	: '导出到Excel',
	handler	: function() {
	var vExportContent = grid.getExcelXml();
	if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) {
	var fd = Ext.get('frmDummy');
	if (!fd) {
	fd = Ext.DomHelper.append(Ext.getBody(), {
	tag		: 'form',
	method	: 'post',
	id		: 'frmDummy',
	action	: 'excel-template.jsp',
	target	: '_blank',
	name	: 'frmDummy',
	cls		: 'x-hidden',
	cn		: [{
	tag		: 'input',
	name	: 'exportContent',
	id		: 'exportContent',
	type	: 'hidden'
	}]
	}, true);
	}
	fd.child('#exportContent').set({
	value	: vExportContent
	});
	fd.dom.submit();
	} else {
	document.location = 'data:application/vnd.ms-excel;base64,' + Base64.encode(vExportContent);
	}
	}
	});

	// create the Grid
	var grid = new Ext.grid.GridPanel({
	id					: 'static-grid',
	store				: store,
	renderTo			: Ext.getBody(),
	columns				: [{
	id			: 'company',
	header		: '公司',
	width		: 160,
	sortable	: true,
	dataIndex	: 'company'
	}, {
	header		: '每股单价',
	width		: 75,
	sortable	: true,
	renderer	: 'usMoney',
	dataIndex	: 'price'
	}, {
	header		: '波动',
	width		: 75,
	sortable	: true,
	renderer	: change,
	dataIndex	: 'change'
	}, {
	header		: '波动率',
	width		: 75,
	sortable	: true,
	renderer	: pctChange,
	dataIndex	: 'pctChange'
	}, {
	header		: '最新更新',
	width		: 85,
	sortable	: true,
	renderer	: Ext.util.Format.dateRenderer('m/d/Y'),
	dataIndex	: 'lastChange'
	}],
	stripeRows			: true,
	autoExpandColumn	: 'company',
	autoHeight			: true,
	width				: 600,
	title				: 'Array Grid',
	bbar				: new Ext.PagingToolbar({
	store		: store,
	pageSize	: 10,
	displayInfo	: true
	}),
	tbar				: new Ext.Toolbar({
	buttons	: [linkButton]
	})
	});*/

	});